import { ElTooltip } from 'element-plus';
import 'element-plus/theme-chalk/el-popper.css';
import { PropType } from 'vue';
import './style.scss';
type TPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end';

export const MciTooltip = defineComponent({
  name: 'MciTooltip',
  props: {
    // 显示的文字内容
    content: {
      type: String,
      default: ''
    },
    // 自动根据内容出现文本溢出显示
    isTruncate: {
      type: Boolean,
      default: false
    },
    placement: {
      type: String as PropType<TPlacement>,
      default: 'bottom'
    }
  },
  setup(props) {
    const tooltipDisabled = ref(props.isTruncate);

    const tooltipDisabledChange = () => {
      if (!props.isTruncate) return;
      setTimeout(() => {
        const nameNode = document.querySelector(`.label[data-name="${props.content}"]`) as HTMLDivElement;
        if (nameNode) {
          if (nameNode.clientWidth < nameNode.scrollWidth) {
            tooltipDisabled.value = false;
          }
        }
      }, 200);
    };

    onMounted(tooltipDisabledChange);

    return {
      tooltipDisabled
    };
  },
  render() {
    return (
      <ElTooltip
        class="mci-tooltip"
        content={this.content}
        placement={this.placement}
        disabled={this.tooltipDisabled}
        vSlots={this.$slots}
      >
        <div class="label truncate" data-name={this.content}>
          {this.content}
        </div>
      </ElTooltip>
    );
  }
});
